<template>
    <view class="register-container">
        <view class="register-form">
            <view class="form-item">
                <text class="label">用户名</text>
                <input type="text" v-model="formData.username" class="input" placeholder="请输入用户名"
                    placeholder-class="placeholder" />
            </view>

            <view class="form-item">
                <text class="label">密码</text>
                <input type="password" v-model="formData.password" class="input" placeholder="请输入密码"
                    placeholder-class="placeholder" />
            </view>

            <view class="form-item">
                <text class="label">确认密码</text>
                <input type="password" v-model="formData.confirmPassword" class="input" placeholder="请再次输入密码"
                    placeholder-class="placeholder" />
            </view>

            <button class="register-btn" @tap="handleRegister">注册</button>

            <view class="login-link" @tap="goToLogin">
                <text>已有账号？</text>
                <text class="link">立即登录</text>
            </view>

            <view class="agreement">
                <text class="agreement-text">注册即代表同意</text>
                <text class="agreement-link" @tap="showAgreement">《用户协议》</text>
            </view>
        </view>
    </view>
</template>

<script setup>
import { ref } from 'vue';
import { reqRegister } from '@/api/user';

const formData = ref({
    username: '',
    password: '',
    confirmPassword: ''
});

const handleRegister = async () => {
    // 表单验证
    if (!formData.value.username || !formData.value.password || !formData.value.confirmPassword) {
        uni.showToast({
            title: '请填写完整信息',
            icon: 'none'
        });
        return;
    }

    if (formData.value.password !== formData.value.confirmPassword) {
        uni.showToast({
            title: '两次密码输入不一致',
            icon: 'none'
        });
        return;
    }

    try {
        uni.showLoading({
            title: '注册中...'
        });

        // TODO: 调用注册接口
        const res = await reqRegister({
          username: formData.value.username,
          password: formData.value.password
        });
        console.log('res', res)

        uni.hideLoading();
        uni.showToast({
            title: '注册成功',
            icon: 'success'
        });

        // 返回登录页
        setTimeout(() => {
            uni.navigateBack();
        }, 1500);
    } catch (error) {
        uni.hideLoading();
        uni.showToast({
            title: error.message || '注册失败',
            icon: 'error'
        });
    }
};

// 跳转到登录页
const goToLogin = () => {
    uni.navigateTo({
        url: '/pages/user_package/login/login?from=register'
    });
};

// 显示用户协议
const showAgreement = () => {
    // TODO: 显示用户协议
    uni.showToast({
        title: '用户协议待完善',
        icon: 'none'
    });
};
</script>

<style lang="scss" scoped>
.register-container {
    min-height: 100vh;
    padding: 40rpx;
    background-color: #fff;

    .register-form {
        margin-top: 60rpx;

        .form-item {
            margin-bottom: 40rpx;

            .label {
                display: block;
                font-size: 32rpx;
                color: #333;
                margin-bottom: 20rpx;
            }

            .input {
                width: 100%;
                height: 88rpx;
                padding: 0 20rpx;
                font-size: 30rpx;
                color: #333;
                border-bottom: 2rpx solid #eee;
                transition: border-color 0.3s ease;

                &:focus {
                    border-color: #2196f3;
                }
            }

            .placeholder {
                color: #999;
            }
        }

        .register-btn {
            width: 100%;
            height: 88rpx;
            line-height: 88rpx;
            margin-top: 60rpx;
            background: #2196f3;
            color: #fff;
            font-size: 32rpx;
            border-radius: 44rpx;
            border: none;

            &:active {
                opacity: 0.9;
            }

            &::after {
                border: none;
            }
        }

        .login-link {
            margin-top: 40rpx;
            text-align: center;
            font-size: 28rpx;
            color: #666;

            .link {
                color: #2196f3;
                margin-left: 10rpx;
            }
        }

        .agreement {
            margin-top: 30rpx;
            text-align: center;
            font-size: 24rpx;

            .agreement-text {
                color: #999;
            }

            .agreement-link {
                color: #2196f3;
                margin-left: 4rpx;
            }
        }
    }
}
</style>